<template>
  <div class="wrap">
    <div style="display:flex">
      <date-select @dateChange="dateChange" />
      <classify-select :options="options" @classfySelect="classfySelect" />
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="tableHeaderStyle"
      :row-class-name="tableRowClassName"
      height="63vh"
    >
      <el-table-column
        prop="group_name"
        label="设备名称"
      >
        <template slot-scope="scope">
          {{ scope.row.group_type_id == 1 ? scope.row.group_name : scope.row.device_name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="event_desc"
        label="事件描述"
      />
      <el-table-column
        prop="created_at"
        label="发生时间"
      />
      <el-table-column
        label="告警等级"
      >
        <template slot-scope="scope">
          {{ scope.row.alarm_level == '1' ? '一般' : scope.row.alarm_level == '2'? '紧急':'严重' }}
        </template>
      </el-table-column>
      <el-table-column
        label="告警类型"
      >
        <template slot-scope="scope">
          {{ scope.row.alarm_type == 'yc' ? '越限' : '变位' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="group_name"
        label="操作"
      />
    </el-table>
    <pagination v-show="total>20" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="pagination" />
  </div>
</template>

<script>
import { getGroupAlarm } from '@/api/stationMonitor'
import { mapGetters } from 'vuex'
import DateSelect from '@/components/DateSelect'
import ClassifySelect from '@/components/ClassifySelect'
import Pagination from '@/components/Pagination'
export default {
  components: {
    DateSelect,
    ClassifySelect,
    Pagination
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableData: [],
      date: '',
      options: [{
        value: '0',
        label: '未确认'
      }, {
        value: '1',
        label: '已确认'
      }],
      isConfirm: 0,
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 20
      }
    }
  },
  computed: {
    ...mapGetters([
      'stationId'
    ])
  },
  watch: {
    id() {
      this.getGroupAlarm()
    }
  },
  methods: {
    getGroupAlarm() {
      const option = {
        stationId: this.stationId,
        groupId: this.id,
        date: this.date,
        confirm: this.isConfirm
      }
      getGroupAlarm(option).then(res => {
        const { data: { data }} = res
        this.tableData = data
        this.total = res.data.total
      })
    },
    dateChange(date) {
      this.date = date
      this.getGroupAlarm()
    },
    classfySelect(val) {
      this.isConfirm = val
      this.getGroupAlarm()
    },
    pagination(page) {
      this.listQuery.page = page
      this.getGroupAlarm()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 10px
}
</style>
